<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        .box{
            width:170px;
            min-height:170px;
            background: darkcyan;
            padding:30px;

        }
        table{
            border:1px solid #000;
        }
        td{ 
            border:1px solid #000;
            padding:10px;
            text-align: center;
        }
        ul{
            list-style: none;
            display: flex;
            margin:0;
            padding:0;
        }
        li{
            width:200px;
            background: pink;
        }

        .zoom-enter-active{
            animation: zoomInDown .9s;
        }

        .zoom-leave-active{
            animation: zoomOutDown .9s;
        }

        .box{
            width:50%;
            min-height:300px;
            border:1px solid #999;
            border-radius: 10px;

        }
        .router-link-exact-active, .router-link-active{
            font-size: 30px;
            font-weight: bold;
            color:#f50;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        
        <!-- 5, 路由出口 路由匹配到的组件将渲染在这里  -->
        <router-view class="box"></router-view>
        <!-- 6 路由跳转 声明式 -->
        <hr>
        <div>
            <router-link to="/home">首页1</router-link>
            <router-link to="/dashboard">首页3</router-link>
            <router-link :to="{name:'home'}">首页2</router-link>

            <router-link to="/news/2022/infos/乌克兰">新闻-乌克兰</router-link>
            <router-link to="/news/0221/infos/奥运会">新闻-奥运会</router-link>
            <router-link :to="{name:'news',params:{nid:1001,title:'新春快乐'}}">新闻-虎年初一</router-link>

            <router-link to="/user?uid=2114&name=zuozuomu">用户-大左</router-link>
            <router-link to="/user?uid=2113&name=leson">用户-大雷</router-link>
            <router-link :to="{name:'user',query:{uid:2112,name:'老王'}}">用户-老王</router-link>

            <router-link to="/find/东湖/0320?who=小余#level2">find-1</router-link>
            <router-link to="/find/黄鹤楼/0501?who=小左#level3">find-2</router-link>
            <router-link :to="{name:'find',params:{address:'上海',time:'0414'},query:{who:'2114所有人'}}">find-3</router-link>
            <router-link to="/mine/1314">个人中心</router-link>
            <router-link :to="{name:'mine',params:{mid:520}}">我的0</router-link>
            <router-link to="/mine/admin">超管</router-link>



        </div>
    </div>  
    <template id="home">
        <div>
            <h2>Home - hOme - Home </h2>
        </div>
    </template>
    <template id="news">
        <div>
            <h2>News - news  - News </h2>
            <h2>: 路由参数 (params  )</h2>
            <h2>nid --- {{$route.params.nid }}</h2>
            <h2>title --- {{$route.params.title  }}</h2>

        </div>
    </template>
    <template id="user">
        <div>
            <h2>User - User - 用户中心</h2>
            <h2>路由信息 $route </h2>
            <h2>? 声明参数 (query) </h2>
            <h2>uid --- {{$route.query.uid  }}</h2>
            <h2>name --- {{$route.query.name   }}</h2>
            
        </div>
    </template>
    <template id="mine">
        <div>
            <h2>mine - mine - 个人中心 </h2>
            <h2>mid --- {{$route.params.mid }}</h2>
        </div>
    </template>

    <template id="notfound">
        <div>
            <h2>404 - 404 - notfound</h2>
        </div>
    </template>

    <template id="find">
        <div>
            <h1>Find - Find - FInd - 发现春天的美丽 </h1>
            <h2>$route (路由信息)</h2>
            <div>
                <p>$route.params (路由参数)</p>
                <h3>address== {{$route.params.address}}</h3>
                <h3>time== {{$route.params.time}}</h3>
                <p>$route.query (查询参数)</p>
                <h3>who --- {{$route.query.who }} </h3>
                <h2>
                    路由路径path :  {{$route.path}}
                </h2>
                <h2>路由的完整路径fullPath: {{$route.fullPath}}</h2>
                <h2>路由名称 name:  {{$route.name }}</h2>
                <h2>路由hash 值  : {{$route.hash }}</h2>
                <h2>路由标记的信息 meta : {{$route.meta.isAlive?'需要缓存':'不需要缓存'}}</h2>
            </div>
        </div>
    </template>
   
    <script>
        Vue.component('myhead',{
            template:"<h2>Head - wh2114-daydayup</h2>"
        })
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)  (脚手架)

        // 1. 定义路由组件.
        const Home = {
            template:"#home"
        }
        const News = {
            template:"#news"
        }
        const Find = {
            template:"#find"
        }
        const User = {
            template:"#user"
        }
        const Mine = {
            template:"#mine"
        }
        const NotFound = {
            template:"#notfound"
        }
        // 2. 定义一些路由
        // 每个路由都需要映射到一个组件。
        const routes = [
            {path:"/",redirect:{
                // path:"/home"
                name:"home"
            }},
            {path:'/home',alias:"/dashboard",component:Home,name:"home",meta:{isAlive:true }},
            {path:'/news/:nid/infos/:title?',component:News,name:"news"},
            {path:'/user',component:User,name:"user"},
            {path:'/find/:address/:time',component:Find,name:"find",meta:{isAlive:true,isAnimate:true }}, 
            
            {
                path:"/mine/admin",
                component:{
                    template:"<h2>admin - admin - 超管 </h2>"
                }
            },
            {path:'/mine/:mid',component:Mine,name:"mine"},
            {path:'/404',component:NotFound,name:'notfound'},
            {
                path:"*",
                redirect:{
                    name:"notfound"
                }
            }
        ]
        
        // 3. 创建路由实例并传递 `routes` 配置  你可以在这里输入更多的配置
        // # 表示 hash 路由    
        const router = new VueRouter({
            routes,
            mode:'hash'  // mode 路由模式  hash/history 
        })
        
        // 4. 路由挂载到根实例
        const vm = new Vue({
            router,  // this.$router 
            data:{
                title:"Vue 路由初步",
            },
            components:{
               
            },
            watch:{
                '$route':function(to,from){
                    console.log(to)
                    console.log(from)
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
                
                console.log(this.$router) // 路由对象  负责路由跳转 路由导航和路由全局监听
                console.log(this.$route)  // 路由信息对象  当前激活的路由对象  路由参数 query(?)&params(:)  

            }
        }).$mount("#app")


    </script>
    <!-- 
        Vue 路由是用来实现单页面应用的 
        routes 会根据不同的path 去映射不同的 组件  , 然后渲染组件到 router-view 

        动态路由  ==  路由参数传递   (动态路径参数)

        动态路由匹配  2中  ?id=1903  :(冒号)  
        a. ?id=1903  问号拼接的参数  表示查询参数  (search ?id=1903  ) (query id=1903)
        b. : 冒号声明    params    路由参数  
        /users/:uid    /users/1001  /users/1002   $route.params.uid 
        /users/:uname?   /users/ming  /users/55k   $route.params.uname  
        ? 表示这个是一个未知的参数  三目    传     
        
        $route  路由对象属性 
        $route.query      个 key/value 对象，表示 URL 查询参数 (?)
        $route.params     一个 key/value 对象  获取路由参数   (:)   
        $route.name       当前路由的名称 
        $route.path       对应当前路由的路径，总是解析为绝对路径  
        $route.hash       当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串
        $route.fullPath   完成解析后的 URL，包含查询参数和 hash 的完整路径
        $route.meta       路由标记信息  

        name 命名路由
        通过一个名称来标识一个路由  
        :to="{name:'users',params:{uid:1002}}"

        匹配优先级  
        同一个路径可以匹配多个路由     匹配的优先级就按照路由的定义顺序：
        谁先定义的，谁的优先级就最高    

        路由重定向   url 一定改变  
        www.baidu.com  ==>   www.zuozhaoxi.xom 
        { path:"*", redirect:{name:"404"}}

        路由别名  第二个名称   缺点 没有高亮  
        path =  '/admin'   
        alias = '/administrator'  


        router-link 的 高亮 path  
     -->
</body>
</html>